<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="admin/end-common::commonCss(~{::title},~{},~{::script},~{::style})">
    <title>JAVA在线考试-操作日志</title>

    <script th:src="@{/laydate/laydate.js}"></script>
    <style>
        .body{
            background-color: #f8f8f8;
        }
    </style>
    <script th:inline="javascript">
        layui.use(['table','element','laydate','form'], function(){
            var table = layui.table;
            var element = layui.element;
            var laydate = layui.laydate;
            var form = layui.form;

            laydate.render({
                elem: '#search-createTime'
                ,range: true
            });

            $("#searchBtn").click(function () {
                reload();
            });
            $("#resetBtn").click(function () {
                $("#searchOperationInfoForm")[0].reset();
                tableIns.reload({
                    where: {
                        "msg": "",
                        "code": "",
                        "data": {
                            "userName": '',
                            "operation": '',
                            "url": '',
                            "ip": '',
                            "startTime": '',
                            "endTime": ''
                        }
                    }
                    , page: {
                        curr: 1
                    }
                });
            });

            var tableIns = table.render({
                elem: '#operationTable'
                , url: '/sys/operation/listForPage'
                , contentType: 'application/json'
                , method: 'post'
                , where: {
                    "msg": "",
                    "code": "",
                    "data": {
                        "userName": $('#search-user-name').val(),
                        "operation": $('#search-operation').val(),
                        "url": $('#search-url').val(),
                        "ip": $('#search-ip').val(),
                        "startTime": $("#search-createTime").val().split(" - ")[0],
                        "endTime": $("#search-createTime").val().split(" - ")[1] != null ? $("#search-createTime").val().split(" - ")[1] : ""
                    }
                }
                , defaultToolbar: []
                , page: true
                , limits: [20, 50, 100]
                , limit: 50
                , cols: [
                    [
                        {field: 'id', title: 'ID', hide: true}
                        , {field: 'userName', title: '操作人'}
                        , {field: 'ip', title: 'ip地址'}
                        , {field: 'operation', title: '操作名称'}
                        , {field: 'method', title: '方法'}
                        , {field: 'url', title: '请求地址'}
                        , {field: 'argument', title: '请求参数'}
                        , {field: 'createTime', title: '创建时间'}
                    ]
                ]
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.result.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.records //解析数据列表
                    };
                }
            });

            function reload() {
                tableIns.reload({
                    where: {
                        "msg": "",
                        "code": "",
                        "data": {
                            "userName": $('#search-user-name').val(),
                            "operation": $('#search-operation').val(),
                            "url": $('#search-url').val(),
                            "ip": $('#search-ip').val(),
                            "startTime": $("#search-createTime").val().split(" - ")[0],
                            "endTime": $("#search-createTime").val().split(" - ")[1] != null ? $("#search-createTime").val().split(" - ")[1] : ""
                        }
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }

        });

    </script>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="admin/end-common::header"></div>
    <div th:replace="admin/end-common::side('operation')"></div>

    <div class="layui-body body">
        <div class="layui-fluid" style="padding: 15px;">
            <div class="layui-card">
                <form class="layui-form layui-card-header" style="padding: 15px;min-height: 100px" lay-filter="searchOperationInfoForm" id="searchOperationInfoForm">
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width:150px;">
                            <input class="layui-input" id="search-user-name" autocomplete="off" placeholder="操作人姓名">
                        </div>
                        <div class="layui-inline" style="width:250px;">
                            <input class="layui-input" id="search-operation" autocomplete="off" placeholder="操作名称">
                        </div>
                        <div class="layui-inline" style="width:250px;">
                            <input class="layui-input" id="search-url" autocomplete="off" placeholder="请求地址">
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width:150px;">
                            <input class="layui-input" id="search-ip" autocomplete="off" placeholder="ip地址">
                        </div>
                        <div class="layui-inline">
                            <input type="text" id="search-createTime" placeholder="创建时间" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline" style="float: right;">
                            <button type="button" class="layui-btn" id="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button  type="button" class="layui-btn" id="resetBtn">重置</button>
                        </div>
                    </div>
                </form>
                <div class="layui-card-body">
                    <div style="padding-bottom:10px;">
                        <table class="layui-hide" id="operationTable" lay-skin="line" lay-filter="operationTable">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="admin/end-common::footer"></div>
</div>

</body>
</html>